<template>
  <child-page>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="video-camera" />
          基本参数
        </span>
        <div class="components-form-demo-advanced-search">
          <base-info></base-info>
        </div>
      </a-tab-pane>
    </a-tabs>
  </child-page>
</template>

<script>
import childPage from "@/components/childPageContent/index";
import baseInfo from "@/views/project/baseInfo";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
// const root = process.env.VUE_APP_API_ROOT;
import validate from "@/tool/validateFunction";
const root = process.env.VUE_APP_API_ROOT;
export default {
  name: "add",
  components: {
    childPage,
    baseInfo
  },
  data() {
    return {
      form: this.$form.createForm(this),
      pswForm: this.$form.createForm(this),
      visible: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      isShow: true,
      statusOption: [{ label: "在用", value: 1 }, { label: "停用", value: 2 }],
      sexOption: [{ label: "男", value: 1 }, { label: "女", value: 2 }],
      rule: {
        nickName: [
          { required: true, message: "必填项" },
          { validator: validate.validateLength, max: 15, min: 1 }
        ],
        password: [{ required: true, message: "必填项" }],
        checkPsw: [{ required: true, message: "必填项" }],
        userName: [{ required: true, message: "必填项" }],
        email: [{ validator: validate.validateEmail }],
        phone: [{ validator: validate.validatePhoneNumber }],
        status: [{ required: true, message: "必填项" }],
        sex: [{ required: true, message: "必填项" }]
      },
      initInfo: {
        status: 1
      },
      imageUrl: "",
      loading: false,
      root
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          let form = JSON.parse(JSON.stringify(values));
          delete form.checkPsw;
          form._id = this.$route.params.id;
          this.$ajax
            .post(this.$api.editAdmin, form)
            .then(res => {
              this.$message.success(res.data.message);
              this.initInfo = res.data.data;
            })
            .catch(err => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
    handleChangePsw(e) {
      e.preventDefault();
      this.pswForm.validateFields((error, values) => {
        if (!error) {
          alert(values);
        } else {
          return false;
        }
      });
    },

    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // let url = root + info.file.response.data.url;
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      if (!isJPG) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJPG && isLt2M;
    },
    cropSuccess(imgDataUrl) {
      this.imageUrl = imgDataUrl;
    },
    showUploadModal() {
      this.visible = true;
    },
    cropUploadSuccess(jsonData) {
      this.$message.success(jsonData.message);
      setTimeout(() => {
        this.updateImg(jsonData.data.url);
      }, 3000);
    },
    updateImg(url) {
      let info = JSON.parse(JSON.stringify(this.initInfo));
      info.avatar = url;
      this.$ajax
        .post(this.$api.editAdmin, info)
        .then(res => {
          this.$message.success(res.data.message);
          this.initInfo = res.data.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    cropUploadFail() {
      this.$message.error("上传失败");
    },
    getAdminById() {
      // let id = this.$route.params.id;
      // this.$ajax
      //   .get(this.$api.getAdminById, {
      //     params: {
      //       // id: id.toString()
      //     }
      //   })
      //   .then(res => {
      //     let data = res.data;
      //     this.initInfo = data.data;
      //   })
      //   .catch(err => {
      //     this.$message.error(err);
      //   });
    }
  },
  created() {
    this.getAdminById();
    if (
      this.$route.name === "editProject" ||
      this.$route.name === "detailsProject"
    ) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
.components-form-demo-advanced-search {
  .flex_align_center();
}
.avatar-wrapper {
  border: 1px dashed @border-color-base;
  padding: 10px;
  position: relative;
  .modal {
    display: none;
    .anticon {
      position: absolute;
      top: 50%;
      left: 50%;
      color: #d8d8d8;
      font-size: 50px;
      transform: translate(-50%, -50%);
    }
  }
  &:hover {
    .modal {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>
